<template>
	<uni-rate class="van-rate" :disabled="disabled" :readonly="readonly" :allow-half="allowHalf" v-model="val" :active-color="color" :size="size"/>
</template>

<script>
export default {
	model: {
	    prop: 'value',
	    event: 'change'
	},
    data(){
        return {
			val: this.value
		}
    },
	watch: {
		value(val) {
			this.val = val
		},
		val(val) {
			this.$emit('change', val)
		}
	},
    props: {
		value: {
			type: Number,
			default: 0
		},
		readonly: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		color: {
			type: String,
			default: 'var(--color)'
		},
		size: {
			type: [String, Number],
			default: '14'
		},
		allowHalf: {
			type: Boolean,
			default: false
		}
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
	.van-rate{
    :deep(.uni-rate__icon) {
		    margin-top: 2px;
		}
	}
</style>